<template>
  <div class="panel">
    <el-button @click="addRiver_vectorTile">矢量瓦片</el-button>
    <!-- <el-button @click="addRiver_vectorTileWMTS">矢量瓦片(WMTS)</el-button> -->
  </div>

  <!-- <simple-time-line @change="updateRiver" /> -->

  <base-map />
</template>
<script setup>
import { onMounted, nextTick, ref, watchEffect, watch } from "vue";

import { Map, View } from "ol";
import { fromLonLat, get as getProjection, transform } from "ol/proj";
import {
  Tile as TileLayer,
  Vector as VectorLayer,
  Image as ImageLayer,
  VectorTile as VectorTileLayer,
} from "ol/layer";
import {
  XYZ,
  Vector as VectorSource,
  ImageCanvas,
  VectorTile as VectorTileSource,
} from "ol/source";
import { Style, Stroke, Circle as CircleStyle } from "ol/style";

import { GeoJSON, MVT } from "ol/format";

import { createXYZ, WMTS as WMTSTileGrid } from "ol/tilegrid";

import * as turf from "@turf/turf";
import * as radash from "radash";

import { getLayerByName, getVectorLayer } from "@/utils/layer.js";
import { flyTo, flyToFeature, getExtent } from "../../utils/view";


import SimpleTimeLine from "@/components/SimpleTimeLine.vue";
import BaseMap from "@/components/BaseMap.vue";

let riverVectorTileLayer;
// 加载矢量切片
function addRiver_vectorTile() {
  const layerName = "BeiJiang%3Abj";
  const layerProjection = "4326";
  riverVectorTileLayer = new VectorTileLayer({
    source: new VectorTileSource({
      // url: "http://localhost:8080/geoserver/gwc/service/tms/1.0.0/BeiJiang%3Abj@EPSG%3A4326@geojson/{z}/{x}/{-y}.geojson",
      tileUrlFunction: function (tileCoord) {
        const [z, x, y] = tileCoord;
        const url =
          "http://localhost:8080/geoserver/gwc/service/tms/1.0.0/BeiJiang%3Abj@EPSG%3A4326@geojson/" +
          (z - 1) +
          "/" +
          x +
          "/" +
          (Math.pow(2, z - 1) - 1 - y) +
          ".geojson";
        return url;
      },
      format: new GeoJSON(),
      tileGrid:
       new createXYZ({
        extent: getProjection("EPSG:4326").getExtent(),
        maxZoom: 18,
      }),
    }),
    style: function (feature) {
      const style = new Style({
        stroke: new Stroke({
          color: "blue",
          width: 1,
        }),
      });
      return style;
    },
  });
  map.addLayer(riverVectorTileLayer);
}

// 通过WMTS加载矢量切片
function addRiver_vectorTileWMTS() {
  const baseUrl = "http://localhost:8080/geoserver/gwc/service/wmts";
  const layerName = "BeiJiang:bj";
  const style = "";
  const gridsetName = "EPSG:4326";
  const format = "application/json;type=geojson";
  const resolutions = [
    0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625,
    0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625,
    6.866455078125e-4, 3.4332275390625e-4, 1.71661376953125e-4,
    8.58306884765625e-5, 4.291534423828125e-5, 2.1457672119140625e-5,
    1.0728836059570312e-5, 5.364418029785156e-6, 2.682209014892578e-6,
    1.341104507446289e-6, 6.705522537231445e-7, 3.3527612686157227e-7,
  ];
  const params = {
    REQUEST: "GetTile",
    SERVICE: "WMTS",
    VERSION: "1.0.0",
    LAYER: layerName,
    STYLE: style,
    TILEMATRIX: gridsetName + ":{z}",
    TILEMATRIXSET: gridsetName,
    FORMAT: format,
    TILECOL: "{x}",
    TILEROW: "{y}",
  };

  let url = baseUrl + "?";
  for (var param in params) {
    url = url + param + "=" + params[param] + "&";
  }
  url = url.slice(0, -1);

  riverVectorTileLayer = new VectorTileLayer({
    source: new VectorTileSource({
      url,
      format: new GeoJSON(),
      projection: "EPSG:4326",
      tileGrid: new WMTSTileGrid({
        extent: [-180, -90, 180, 90],
        resolutions: resolutions,
        matrixIds: [
          "0",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "20",
          "21",
        ],
      }),
    }),
    style: function (feature) {
      const style = new Style({
        stroke: new Stroke({
          color: "blue",
          width: 1,
        }),
      });
      return style;
    },
  });
  map.addLayer(riverVectorTileLayer);
}
</script>

<style lang="less" scoped>
.panel {
  position: absolute;
  top: 10px;
  left: 150px;
  z-index: 999;
}
</style>
